<template>
  <view class="goods-pay-container">
    <!-- 收货地址组件 -->
    <my-address></my-address>
    <!-- 待支付商品列表的标题区域 -->
    <view class="cart-title">
      <!-- 左侧的图标 -->
      <uni-icons type="shop" size="20"></uni-icons>
      <!-- 右侧的文本 -->
      <text class="cart-title-text">待支付商品</text>
    </view>
    <!-- 待支付商品列表 -->
    <view class="goods-pay-list">
      <view v-for="(goods,i) in cart" :key="i">
        <my-pay-goods :goods="goods"></my-pay-goods>
      </view>
    </view>
    <!-- 支付组件 -->
    <my-pay :goods="cart"></my-pay>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 待支付的商品列表
        cart: []
      };
    },
    onLoad(options) {
      uni.setNavigationBarTitle({
        title: "支付"
      })
      // console.log(JSON.stringify(options.cart));
      // 由于购物车数据中有些自己添加的商品的图片是base64格式，在此处接收参数时JSON.parse不能够解析base64格式中的特殊字符，
      // 所以使用encodeURIComponent加密传输，此处使用decodeURIComponent解密
      this.cart = JSON.parse(decodeURIComponent(options.cart))
    }
  }
</script>

<style lang="scss" scoped>
  .goods-pay-container {
    padding-bottom: 50px;

    .cart-title {
      height: 40px;
      display: flex;
      align-items: center;
      padding-left: 5px;
      border-bottom: 1px solid #efefef;

      .cart-title-text {
        font-size: 14px;
        margin-left: 10px;
      }
    }
  }
</style>
